import 'package:azlistview/azlistview.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/main/login/country/city_model.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'logic.dart';

class CountryListPage extends StatelessWidget {
  CountryListPage({Key? key}) : super(key: key);

  final logic = Get.put(CountryLogic());
  final state = Get.find<CountryLogic>().state;
  ScrollController controller = ScrollController();
  bool toMainPage = false;

  @override
  Widget build(BuildContext context) {
    if(Get.arguments!=null) {
      Map<String, dynamic> params = Get.arguments;
      if(params.containsKey('toMainPage')) {
        toMainPage = params['toMainPage'];
      }
    }
    logic.getCountriesList();
    return PopScope(
        canPop: false,
        onPopInvoked: (didPop)=>(Get.offNamed('/login/country', arguments: {'toMainPage': toMainPage})),
        child: Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Text('', style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor),),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.offNamed('/login/country', arguments: {'toMainPage': toMainPage})),
      ),
      body: Container(
        padding: EdgeInsets.only(top: 100.h),
        child: Column(
          children: [
            Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.only(left: 115.w),
              child: Text(LocaleKeys.country_area_selected.ts, style: TextStyle(fontSize: 90.sp, color: Color(0xFF000013)),),
            ),
            Container(
              width: 1.sw,
              margin: EdgeInsets.fromLTRB(42.w, 105.h, 42.w, 0),
              padding: EdgeInsets.fromLTRB(76.w, 0.h, 0, 0.h),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(50)
              ),
              child: Row(
                children: [
                  Opacity(opacity: 0.5, child: Icon(Icons.search_outlined),),
                  Expanded(child: Container(
                      alignment: Alignment.bottomCenter,
                      child: TextField(autofocus: false,
                        onChanged: (value) {
                          _search(value);
                        },
                        textAlign: TextAlign.justify,
                        maxLines: 1,
                        cursorColor: Colors.grey,
                        decoration: const InputDecoration(
                          border: InputBorder.none,
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(
                                  color: Colors.transparent
                              )
                          ),
                          focusedErrorBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.transparent)
                          ),),
                      ))
                  )],
              ),
            ),
            GetBuilder<CountryLogic>(
                id: 'country_loading_item',
                builder: (_){
                  return Expanded(
                    child: AzListView(
                      itemCount: state.cityList.length,
                      data: state.cityList,
                      itemBuilder: (BuildContext context, int index) {
                        // if(index==0) {
                        //   return _buildFirstItem(state.cityList[index]);
                        // }
                        return _buildItem(state.cityList[index]);
                      },
                      padding: EdgeInsets.zero,
                      // 浮层
                      // susItemBuilder: (BuildContext context, int index) {
                      //   CityModel model = state.cityList[index];
                      //   String tag = model.getSuspensionTag();
                      //   return getSusItem(context, tag);
                      // },
                      indexBarData: kIndexBarData,
                    ),);
                })
          ],),
      ),));
  }

  Widget _buildFirstItem(CityModel cityModel) {
    return Ink(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.zero,
      ),
      child: InkResponse(
        splashColor: ColorConst.activeColor,
        borderRadius: BorderRadius.zero,
        highlightShape: BoxShape.rectangle,
        highlightColor: ColorConst.activeColor,
        onTap: () {
          logic.onCitySelected(cityModel);
          Get.offNamed('/login/register', arguments: {'toMainPage': toMainPage});
          },
        child: Container(
          height: 210.h,
          child: Column(
            children: [
              Container(
                  alignment: Alignment.centerLeft,
                  margin: EdgeInsets.only(left: 115.w, top: 60.h),
                  child: Text(cityModel.name, style: TextStyle(fontSize: 48.sp, color: Color(0xFF000013)),)),
              Offstage(offstage: cityModel.isoCode.isEmpty, child: Container(
                  alignment: Alignment.centerLeft,
                  margin: EdgeInsets.only(left: 115.w, top: 12.h),
                  child: Text(cityModel.isoCode, style: TextStyle(fontSize: 42.sp, color: Color(0xFF909090)),)),),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildItem(CityModel cityModel) {
    Widget widget = Ink(
      decoration: BoxDecoration(
        color: Colors.transparent,
        borderRadius: BorderRadius.zero,
      ),
      child: InkResponse(
        splashColor: ColorConst.activeColor,
        borderRadius: BorderRadius.zero,
        highlightShape: BoxShape.rectangle,
        highlightColor: ColorConst.activeColor,
        onTap: (){
          logic.onCitySelected(cityModel);
          Get.offNamed('/login/register', arguments: {'toMainPage': toMainPage});},
        child: Column(
          children: [
            SizedBox(height: 33.h,),
            Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.only(left: 115.w, ),
              child: Text(cityModel.name, style: TextStyle(fontSize: 48.sp, color: Color(0xFF000013)),)),
            Container(
                alignment: Alignment.centerLeft,
                margin: EdgeInsets.only(left: 115.w, top: 12.h),
                child: Text(cityModel.isoCode, style: TextStyle(fontSize: 42.sp, color: Color(0xFF909090)),)),
            SizedBox(height: 33.h,),
          ],
        ),
      ),
    );
    return widget;
  }

  static Widget getSusItem(BuildContext context, String tag,
      {double susHeight = 40}) {
    // if (tag == '★') {
    //   tag = '★ 热门城市';
    // }
    return Container(
      height: susHeight,
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.only(left: 16.0),
      color: Color(0xFFF3F4F5),
      alignment: Alignment.centerLeft,
      child: Text(
        '$tag',
        softWrap: false,
        style: TextStyle(
          fontSize: 14.0,
          color: Color(0xFF666666),
        ),
      ),
    );
  }

  void _search(String value) {
    if(value.isEmpty) {
      logic.onCountiesFetchComplete(state.cityListTemp);
    } else {
      Set<CityModel> list = state.cityListTemp.where((v) {
        return v.name.toLowerCase().contains(value.toLowerCase());
      }).toList().toSet();
      logic.onCountiesFetchComplete(list.toList());
    }
  }

}
